<template>
    <view class="addQuestionBankWrap">
        <view class="topSearch">
            <u-input placeholder="请输入关键字" prefixIcon="search"
                prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
                customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx" v-model="searchValue"
                @confirm="onSearch" />

        </view>
        <scroll-view :scroll-y="true" view class="botWrap">
            <view v-if="treeData.length > 0">
                <view v-for="(item, itemIndex) in treeData" :key="item.structId"
                style="border-bottom: 1rpx solid #f3f3f3;padding-bottom: 20rpx;">
                <view class="itemStyle">
                    <view class="subStyle" :style="{ paddingLeft: `${28 + (54 * 0)}rpx;` }">
                        <view class="center">
                            <image src="./static/subTree.svg" style="margin-right: 14rpx;" class="iconStyle" 
                            @click="onDel(item.structId)"/>
                            <view class="oneWrap" style="width: calc(100vw - 332rpx);">{{ item.name }}</view>
                        </view>
                        <view>
                            <image src="./static/addTree.svg" class="iconStyle"
                                @click="onAdd(item, `章节${itemIndex + 1}.${item.children.length+1}`)" />
                            <image src="./static/editTree.svg" class="iconStyle" @click="onEdit(item)" />
                        </view>
                    </view>
                    <view v-for="(ite, iteIndex) in item.children" :key="ite.structId">
                        <view class="subStyle" :style="{ paddingLeft: `${28 + (54 * 1)}rpx;` }">
                            <view class="center">
                                <image src="./static/subTree.svg" style="margin-right: 14rpx;" class="iconStyle" 
                                    @click="onDel(ite.structId)"/>
                                <view class="oneWrap" style="width: calc(100vw - 386rpx);">{{ ite.name }}</view>
                            </view>
                            <view>
                                <image src="./static/addTree.svg" class="iconStyle"
                                    @click="onAdd(ite, `章节${itemIndex + 1}.${iteIndex + 1}.${ite.children.length+1}`)" />
                                <image src="./static/editTree.svg" class="iconStyle" @click="onEdit(ite)" />
                            </view>
                        </view>
                        <view v-for="(it, itIndex) in ite.children" :key="it.structId">
                            <view class="subStyle" :style="{ paddingLeft: `${28 + (54 * 2)}rpx;` }">
                                <view class="center">
                                    <image src="./static/subTree.svg" style="margin-right: 14rpx;" class="iconStyle"
                                         @click="onDel(it.structId)" />
                                    <view class="oneWrap" style="width: calc(100vw - 440rpx);">{{ it.name }}</view>
                                </view>
                                <view>
                                    <image src="./static/disTree.svg" class="iconStyle"/>
                                        <!-- @click="notificationFun('仅支持最多添加三级目录')" /> -->
                                    <image src="./static/editTree.svg" class="iconStyle" @click="onEdit(it)" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            </view>
            <view v-else style="height: 450rpx"class="center">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </scroll-view>
        <view class="botAddBtn" @click="() => onAdd()">
            <image src="../static/images/question/addTk.svg" style="width: 36rpx;height: 36rpx; margin-right: 22rpx;" />
            <text>新增章节</text>
        </view>
        <BotMenu :isPopup="isPopup" @close="isPopup = false" title="编辑章节" :showCancel="true">
            <view class="addNewQb">
                <u--input placeholder="请输入" style="height: 120rpx;" :border="'none'" :clearable="true"
                    v-model="editValue"></u--input>
            </view>
            <view class="okBtn center" @click="onOk">
                确定
            </view>
        </BotMenu>
    </view>
</template>

<script>
import { notificationFun } from "../utils/PrjUtils";
import { getFirstStruct, listStruct, saveStruct,delStruct,} from "./services/myQuestionBankService"
export default {
    data() {
        return {
            treeData: [],
            isPopup: false,
            editValue: "",
            pInfo: {},
            queryData: {
                // 搜索字段
                queryKey: "",
                subjectUuid: "",
            },
            searchValue:"",
            selectTreeData:{},
            //
        }
    },
    onLoad(option) {
        let info = JSON.parse(decodeURIComponent(option.info)) || {}
        uni.setNavigationBarTitle({
                title: info.title || "添加章节"
        });
        // 获取初始化id
        getFirstStruct({ subjectUuid: info.subjectUuid }).then(res => {
            this.pInfo = { ...info, parentId: res }
        })
        this.queryData = { ...this.queryData, subjectUuid: info.subjectUuid }

    },
    onShow() {
       
    },
    watch: {
        queryData: {
            handler: function (val, oldVal) {
                if (val.subjectUuid) {
                    this.onInitData(val)
                }
            },
            deep: true
        }
    },
    computed: {},

    methods: {
        // 编辑信息
        onEdit(record) {
            console.log(record);
            this.editValue = record.name
            this.selectTreeData=record
            this.isPopup = true;
        },
        onOk() {
            saveStruct({ ...this.selectTreeData,subjectUuid: this.pInfo.subjectUuid, name: this.editValue }).then(res => {
                this.queryData = { ...this.queryData }
                this.isPopup = false
            })
        },
        onAdd(record, name) {
            console.log(121, record)
            let param = {}
            // 子级新增
            if (record) {
                param = { name: name, parentId: record.id,}
            }
            // 总新增
            else {
                param = { name: `章节${this.treeData.length + 1}`, parentId: this.pInfo.parentId }
            };
            saveStruct({ ...param, subjectUuid: this.pInfo.subjectUuid }).then(res => {
                this.queryData = { ...this.queryData }
            })
        },
        onDel(structId){
            delStruct({structId,}).then(res=>{
                this.queryData = { ...this.queryData }
            })
        },
        // 初始化数据               
        onInitData() {
            listStruct(this.queryData).then(res => {
                console.log(res)
                this.treeData = res || []
            })
        },
        // 搜索
        onSearch() {
            this.queryData = {
                ...this.queryData,
                queryKey: this.searchValue,
            }
        },
        // 删除知识结构
        
    }
}
</script>

<style lang="scss" scoped>
/* page {
    background-color: #fff !important;
} */

.addQuestionBankWrap {
    position: relative;
    height: 100vh;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #f3f3f3 50%, #fff 50%);
    ;

    .topSearch {
        padding: 24rpx 20rpx;
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        background-color: #fff;
        box-sizing: border-box;
    }

    .botWrap {
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
        background-color: #fff;
        margin-top: 20rpx;
        box-sizing: border-box;
        height: calc(100vh - 178rpx - 160rpx);

        .itemStyle {
            padding: 0 28rpx;

            .subStyle {
                display: flex;
                align-items: center;
                padding: 30rpx 28rpx;
                justify-content: space-between;
            }
        }
    }

    .iconStyle {
        width: 40rpx;
        height: 40rpx;
        margin-left: 20rpx;
    }

    .addNewQb {
        box-sizing: border-box;
        padding: 30rpx;
        background: #F9F9F9;
        margin: 0 30rpx;
        border-radius: 24rpx;
        margin-bottom: 34rpx;
    }

    .okBtn {
        padding: 32rpx;
        border-top: 1px solid #EEEEEE;
    }

    .botAddBtn {
        width: calc(100% - 60rpx);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        margin-left: 30rpx;
        margin-top: 20rpx;
        box-shadow: 0px 1px 8px 0px #00000014;
        border-radius: 24rpx;
        /* position: absolute;
        bottom: 160rpx;
        left: 30rpx; */
        bottom: 66rpx;
        background-color: #37B874;
        color: #fff;
    }
}
</style>